import {NodeItem, Operation, Operations} from '@/components/FilePanel/schemas/panelInterface'
import { useEffect, useRef } from 'react';
import { StyledOperationPanel, StyledOperationItem } from './operationPanel.styles';
import { OperationPanelProps } from './operationPanel.interface';


const commonActions = <T extends NodeItem>(itemInfo: T): Operation[] => [
  { icon: '', label: '删除', action: () => console.log('删除:', itemInfo.Name) }
];

// 目录操作列表
const divOperationList = <T extends NodeItem>(itemInfo: T): Operation[] => [
  ...commonActions(itemInfo),
  { icon: '', label: '新建文件', action: () => console.log('新建文件:', itemInfo.Name) },
  { icon: '', label: '重命名', action: () => console.log('重命名:', itemInfo.Name) }
];

// 文件操作列表
const fileOperationList = <T extends NodeItem>(itemInfo: T): Operation[] => [
  ...commonActions(itemInfo),
  { icon: '', label: '打开', action: () => console.log('打开:', itemInfo.Name) },
  { icon: '', label: '复制', action: () => console.log('复制:', itemInfo.Name) }
];

// 统一入口
const getOperationList = <T extends NodeItem>(itemInfo: T): Operation[] => {
  return itemInfo.isDirectory ? divOperationList(itemInfo) : fileOperationList(itemInfo);
};

export const OperationPanel: React.FC<OperationPanelProps> = ({
    position, itemInfo
}) => {
    const panelRef = useRef<HTMLDivElement>(null);
    // 处理面板外点击关闭
    // useEffect(() => {
    //     const handleClickOutside = (e: MouseEvent) => {
    //     if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
    //         setPanelPosition(null);
    //     }
    //     };

    //     window.addEventListener('click', handleClickOutside);
    //     return () => window.removeEventListener('click', handleClickOutside);
    // }, []);

    return (
        <StyledOperationPanel
          position={position}
          ref={panelRef}
        >
          {getOperationList(itemInfo).map((op, index) => (
            <StyledOperationItem
              key={index}
              onClick={()=>{op.action(itemInfo)}}
            >
              {op.label}
            </StyledOperationItem>
          ))}
        </StyledOperationPanel>
    )
};
